<template>
  <div class="contact-float">
    <el-button
      type="primary"
      circle
      class="contact-button"
      @click="handleContact"
    >
      <el-icon><ChatDotRound /></el-icon>
    </el-button>
  </div>
</template>

<script setup>
import { ChatDotRound } from '@element-plus/icons-vue'

const handleContact = () => {
  // 这里可以添加点击后的处理逻辑，比如打开联系表单或跳转到联系页面
  window.location.href = '/contact-us'
}
</script>

<style lang="scss" scoped>
.contact-float {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 1000;
  
  .contact-button {
    width: 3.5rem;
    height: 3.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    &:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }
    
    .el-icon {
      font-size: 1.5rem;
    }
  }
}

@media screen and (max-width: 768px) {
  .contact-float {
    right: 1rem;
    bottom: 1rem;
    
    .contact-button {
      width: 3rem;
      height: 3rem;
      
      .el-icon {
        font-size: 1.25rem;
      }
    }
  }
}
</style> 